<template>
    <view>
        <view class="tabs">
            <u-sticky bgColor="#fff">
                <u-tabs :list="list" @change="tabChange"></u-tabs>
            </u-sticky>
        </view>

        <view class='orders' v-if="ProList.length > 0">
            <view class='order-item' v-for="item of ProList" :key="item.id">
                <view>
                    <text>预约项目：</text>{{item.project.name}}
                    <text class="status">{{item.status_text}}</text>
                </view>
                <view><text>预约时间：</text>{{item.createtime}}</view>
                <view v-if="item.price"><text>费用：</text>{{item.price}}元</view>
                <view class="action">
					<u-button @click="ToInfo(item.id)" class="item" type="primary" size="mini">详情</u-button>

					<!-- 商家已接单(已报价) -->
					<u-button @click="ToPay(item.id)" v-if="item.status == 1" class="item" type="success" size="mini">确认支付</u-button>

					<!-- 已支付、未服务 -->
					<u-button @click="ToRevoke(item.id)" v-if="item.status > 0 && !item.rate" class="item" type="error" size="mini">撤销预约</u-button>

					<u-button @click="ToCancel(item.id)" v-if="item.status == -2 && !item.rate" class="item" type="error" size="mini">取消撤销</u-button>

					<!-- 已服务、未评价 -->
					<u-button @click="ToRate(item.id)" v-if="item.status == 3 && !item.rate" class="item" type="warning" size="mini">评分</u-button>
				</view>
            </view>
        </view>

        <u-empty
            v-else
            mode="order"
            icon="order"
        >
        </u-empty>

        <!-- 消息提示的组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 模态框 -->
		<u-modal 
			:show="PayShow" 
			:content="PayContent" 
			showCancelButton
			@confirm="PayConfirm"
			@cancel="this.PayShow = false"
		>
		</u-modal>

		<u-modal 
			:show="RevokeShow" 
			:content="RevokeContent" 
			showCancelButton
			@confirm="RevokeConfirm"
			@cancel="this.RevokeShow = false"
		>
		</u-modal>
    </view>
</template>
<script>
export default {
    onShow() {
        this.$u.auth.check()

        // 获取本地存储的信息
        let LoginUser = uni.getStorageSync('LoginUser')

        this.LoginUser = LoginUser

        this.OrderList()
    },
    data() {
        return {
            list: [{
                name: '全部',
            }, {
                name: '未接单',
                id: 0
            }, {
                name: '待付款',
                id: 1
            }, {
                name: '已付款',
                id: 2
            }, {
                name: '已完成',
                id: 3
            }, {
                name: '申请撤销',
                id: -2
            }, {
                name: '已撤销',
                id: -1
            }],
            status: null,
            LoginUser: null,
            PayShow:false,
            PayContent:'是否确认支付订单',
            RevokeShow:false,
            RevokeContent:'是否确认撤销订单',
            ProList:[],
            orderid:null
        }
    },
    methods: {
        tabChange(item) {
            if (item.id || item.id == 0) {
                this.status = item.id
            } else {
                this.status = ''
            }

            this.OrderList()
        },
        async OrderList() {
            let data = {
                status: this.status,
                userid: this.LoginUser.id
            }
            
            let result = await this.$u.api.project.OrderIndex(data)

            this.ProList = result.data

        },
        ToPay(id)
        {
            this.PayShow = true
            this.orderid = id
        },
        async PayConfirm()
        {
            this.PayShow = false

            let data = {
                userid:this.LoginUser.id,
                orderid:this.orderid
            }

            let result = await this.$u.api.project.OrderPay(data)

            if(result.code === 1)
            {
                this.$refs.notice.show({
                    type:'success',
                    message:result.msg,
                    icon:true,
                    complete:() => {
                        this.OrderList()
                    }
                })

                return false
            }else{
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg,
                    icon:true
                })
                return false
            }
        },
        ToRevoke(id)
        {
            this.RevokeShow = true

            this.orderid = id
        },
        async RevokeConfirm()
        {
            this.RevokeShow = false

            let data = {
                userid:this.LoginUser.id,
                orderid:this.orderid
            }

            let result = await this.$u.api.project.OrderRevoke(data)

            if(result.code === 1)
            {
                this.$refs.notice.show({
                    type:'success',
                    message:result.msg,
                    icon:true,
                    complete:() => {
                        this.OrderList()
                    }
                })

                return false
            }else{
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg,
                    icon:true
                })
                return false
            }
        },
        ToInfo(id)
        {
            this.$u.route({
                type:'navigateTo',
                url:'/pages/order/info',
                params:{
                    orderid:id
                }
            })
        }
    },
}
</script>

<style>
.order-item{
  padding: 20rpx 40rpx;
  margin: 30rpx 0rpx;
  /* border-bottom: 2rpx solid #CCCCCC; */
  box-shadow: 0 0 10px #DDD;
}
.order-item text{
  font-size: 32rpx;
}

.order-item .status{
    float: right;
}

.tabs{
    border-bottom: 2rpx solid #CCCCCC;
    box-shadow: 0 0 10px #DDD;
}
.order-item .action{
    text-align: right;
    margin-top:1em;
}

.order-item .action button{
    margin-right:.5em!important;
    width:20%!important;
    display: inline-block;
    height:26px;
    line-height:26px;
}

.u-tabs__wrapper__nav__item__text{
    white-space: nowrap;
}
</style><template>
    <view>
        <view class="tabs">
            <u-sticky bgColor="#fff">
                <u-tabs :list="list" @change="tabChange"></u-tabs>
            </u-sticky>
        </view>

        <view class='orders' v-if="ProList.length > 0">
            <view class='order-item' v-for="item of ProList" :key="item.id">
                <view>
                    <text>预约项目：</text>{{item.project.name}}
                    <text class="status">{{item.status_text}}</text>
                </view>
                <view><text>预约时间：</text>{{item.createtime}}</view>
                <view v-if="item.price"><text>费用：</text>{{item.price}}元</view>
                <view class="action">
					<u-button @click="ToInfo(item.id)" class="item" type="primary" size="mini">详情</u-button>

					<!-- 商家已接单(已报价) -->
					<u-button @click="ToPay(item.id)" v-if="item.status == 1" class="item" type="success" size="mini">确认支付</u-button>

					<!-- 已支付、未服务 -->
					<u-button @click="ToRevoke(item.id)" v-if="item.status > 0 && !item.rate" class="item" type="error" size="mini">撤销预约</u-button>

					<u-button @click="ToCancel(item.id)" v-if="item.status == -2 && !item.rate" class="item" type="error" size="mini">取消撤销</u-button>

					<!-- 已服务、未评价 -->
					<u-button @click="ToRate(item.id)" v-if="item.status == 3 && !item.rate" class="item" type="warning" size="mini">评分</u-button>
				</view>
            </view>
        </view>

        <u-empty
            v-else
            mode="order"
            icon="order"
        >
        </u-empty>

        <!-- 消息提示的组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 模态框 -->
		<u-modal 
			:show="PayShow" 
			:content="PayContent" 
			showCancelButton
			@confirm="PayConfirm"
			@cancel="this.PayShow = false"
		>
		</u-modal>

		<u-modal 
			:show="RevokeShow" 
			:content="RevokeContent" 
			showCancelButton
			@confirm="RevokeConfirm"
			@cancel="this.RevokeShow = false"
		>
		</u-modal>
    </view>
</template>
<script>
export default {
    onShow() {
        this.$u.auth.check()

        // 获取本地存储的信息
        let LoginUser = uni.getStorageSync('LoginUser')

        this.LoginUser = LoginUser

        this.OrderList()
    },
    data() {
        return {
            list: [{
                name: '全部',
            }, {
                name: '未接单',
                id: 0
            }, {
                name: '待付款',
                id: 1
            }, {
                name: '已付款',
                id: 2
            }, {
                name: '已完成',
                id: 3
            }, {
                name: '申请撤销',
                id: -2
            }, {
                name: '已撤销',
                id: -1
            }],
            status: null,
            LoginUser: null,
            PayShow:false,
            PayContent:'是否确认支付订单',
            RevokeShow:false,
            RevokeContent:'是否确认撤销订单',
            ProList:[],
            orderid:null
        }
    },
    methods: {
        tabChange(item) {
            if (item.id || item.id == 0) {
                this.status = item.id
            } else {
                this.status = ''
            }

            this.OrderList()
        },
        async OrderList() {
            let data = {
                status: this.status,
                userid: this.LoginUser.id
            }
            
            let result = await this.$u.api.project.OrderIndex(data)

            this.ProList = result.data

        },
        ToPay(id)
        {
            this.PayShow = true
            this.orderid = id
        },
        async PayConfirm()
        {
            this.PayShow = false

            let data = {
                userid:this.LoginUser.id,
                orderid:this.orderid
            }

            let result = await this.$u.api.project.OrderPay(data)

            if(result.code === 1)
            {
                this.$refs.notice.show({
                    type:'success',
                    message:result.msg,
                    icon:true,
                    complete:() => {
                        this.OrderList()
                    }
                })

                return false
            }else{
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg,
                    icon:true
                })
                return false
            }
        },
        ToRevoke(id)
        {
            this.RevokeShow = true

            this.orderid = id
        },
        async RevokeConfirm()
        {
            this.RevokeShow = false

            let data = {
                userid:this.LoginUser.id,
                orderid:this.orderid
            }

            let result = await this.$u.api.project.OrderRevoke(data)

            if(result.code === 1)
            {
                this.$refs.notice.show({
                    type:'success',
                    message:result.msg,
                    icon:true,
                    complete:() => {
                        this.OrderList()
                    }
                })

                return false
            }else{
                this.$refs.notice.show({
                    type:'error',
                    message:result.msg,
                    icon:true
                })
                return false
            }
        },
        ToInfo(id)
        {
            this.$u.route({
                type:'navigateTo',
                url:'/pages/Order/info',
                params:{
                    orderid:id
                }
            })
        }
    },
}
</script>

<style>
.order-item{
  padding: 20rpx 40rpx;
  margin: 30rpx 0rpx;
  /* border-bottom: 2rpx solid #CCCCCC; */
  box-shadow: 0 0 10px #DDD;
}
.order-item text{
  font-size: 32rpx;
}

.order-item .status{
    float: right;
}

.tabs{
    border-bottom: 2rpx solid #CCCCCC;
    box-shadow: 0 0 10px #DDD;
}
.order-item .action{
    text-align: right;
    margin-top:1em;
}

.order-item .action button{
    margin-right:.5em!important;
    width:20%!important;
    display: inline-block;
    height:26px;
    line-height:26px;
}

.u-tabs__wrapper__nav__item__text{
    white-space: nowrap;
}
</style>